<template>
    <div class="zBox">
        <p class="date_change">
            <el-icon @click="previousMonth()"><ArrowLeftBold /></el-icon>
            <span>{{ moment(date).format('YYYY年MM月') }}</span>
            <el-icon @click="nextMonth()"><ArrowRightBold /></el-icon>
            <span class="today" @click="comeToday()">返回今天</span>
        </p>
        <ul ref="uploadImgBtn">
            <li class="grey">SUN.日</li>
            <li>MON.一</li>
            <li>TUES.二</li>
            <li>WEB.三</li>
            <li>THUR.四</li>
            <li>FRI.五</li>
            <li class="grey">SAT.六</li>
        </ul>
        
        <el-calendar>
            <template #date-cell="{ data }">
                <p style="font-size: 22px;margin: 0;margin-top: 8px;margin-left: 8px;" :class="data.isSelected ? 'is-selected' : ''">
                    {{ data.day.substr(data.day.length - 2, 2) }} {{ data.isSelected ? '' : '' }}
                    <!-- <span v-for="(item, index) in calendarData" :key="index">1</span> -->
    			</p>
                <div v-for="(item, index) in calendarData" :key="index">
                    <div v-if="item.date == data.day" >
                        <el-popover v-if="item.type == 1" placement="bottom" :width="220" trigger="click" :hide-after="0" :offset="-60">
                             <template #reference >
                                <div class="tk" @click="getAlldata(item.date)" ></div>
                            </template> 
                            <p class="dateBu">{{ moment(item.date).format('YYYY年MM月DD日') }}</p>
                            <div class="dailyList" v-if="myDailyList.dailyReportList">
                                <div v-for="i in myDailyList.dailyReportList">
                                    <span class="itemLabel">{{ i.projectName}}</span>
                                    <p v-html="i.content"></p>
                                </div>
                            </div>
                            <div  class="updDailyButton" v-if="item.type == 1 ">
                                <el-button type="danger" @click="getDaily(item.date)">查看详情</el-button>
                                <div v-if="item.isRead == 0">
                                    <el-button  class="updateRB" @click="updDaily(item.date)">编辑日报</el-button>
                                </div>
                                <!-- <div class="comment" v-else-if="item.isRead == 2 && annotateContent">{{ annotateContent }}</div> -->
                            </div>
                        </el-popover>
                        <div  v-if="item.type == 1 ">
                            <div class="unread isPunched" v-if="item.isRead == 0">未读</div>
                            <div class="read isPunched" v-else-if="item.isRead == 1">已读</div>
                            <div class="annotated isPunched" v-else-if="item.isRead == 2">已批注</div>
                        </div>
    					<div class="noPunched" v-if="item.type == 0 ">
                            <el-button type="danger" style="background: #BE1A21;border-color:#BE1A21" @click="addDaily(item.date)">发布日报</el-button>
                        </div>
                    </div>
                </div>
            </template> 
        </el-calendar>
        <el-dialog
            v-model="dialogVisible"
            title="工作日报"
            width="45%"
            :before-close="handleClose"
            :close-on-click-modal="false"
             :close-on-press-escape="false"
        >
         <getDailys :myDailyList="myDailyList"></getDailys>
         <template #footer>
            <el-button  @click="handleClose">关闭</el-button>
        </template>
      </el-dialog>
       
    </div>
</template>
<script setup>
import moment from 'moment';
import { getMyData, getReportByDate } from '@/api/dailyReport';
import mydailyStore from "@/store/modules/mydaily";
import getDailys from './getDailys.vue';
const { proxy } = getCurrentInstance();
const router = useRouter();
const store = mydailyStore();
const date = ref('');
const month = ref('');
const calendarData = ref([]);
const myDailyList = ref([]);
const annotateContent = ref("");
const dialogVisible = ref(false);
date.value = moment().format('YYYY-MM');
month.value = moment().format('YYYY-MM');

let prevBtn = undefined;
let nextBtn = undefined;
let todayBtn = undefined;
onMounted(() => {
    initDom();
});
function initDom() {
    document.getElementsByTagName('thead')[0].style.visibility = 'hidden';
    document.getElementsByTagName('thead')[0].style.display = 'block';
    document.getElementsByTagName('thead')[0].style.height = '0';
    document.getElementsByClassName('el-calendar__header')[0].style.visibility = 'hidden';
    document.getElementsByClassName('el-calendar__header')[0].style.height = '0';
    prevBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(1)');
    nextBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:last-child');
    todayBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(2)');
}

const getImgSrc = (richtext) => {
    if (richtext.indexOf('src="') != -1) {
         if (richtext.indexOf('http') != -1 || richtext.indexOf('https') != -1) {
            return richtext;
        }
        richtext = richtext.replaceAll('src="', 'src="' + import.meta.env.VITE_APP_BASE_API + '');
    }
    return richtext
}
const getAlldata = (data) => {
    let param = {
        date:data
    }
    getReportByDate(param).then(res => {
        if (res.code === 200) {
            myDailyList.value = res.data;
            annotateContent.value = res.data.annotateContent;
            if (res.data.dailyReportList.length > 0) {
                res.data.dailyReportList.map(item => {
                    item.content = getImgSrc(item.content);
                })
            }
        }
    })
}

const getMonthData = () => {
    getMyData({
        month: date.value
    }).then(res => {
        //workday 1工作日 2非工作日
        //type 1有日报  0 没有
        //isRead 1已读 2已批注  0未读
        if (res.code === 200) {
            calendarData.value = res.data;
        }
    })
}

const previousMonth = () => {
    let amonth = date.value;
    date.value = moment(amonth)
        .subtract(1, 'months')
        .format('YYYY-MM');
    prevBtn.click();
    getMonthData();
}

const nextMonth = () => {
    let amonth = date.value;
    date.value = moment(amonth)
        .add(1, 'months')
        .format('YYYY-MM');
    nextBtn.click();
    getMonthData();
}
const comeToday = () => {
    date.value = moment().format('YYYY-MM');
    todayBtn.click();
    getMonthData();
}

const addDaily = (date) => {
    store.date = date;
    store.isUp = false;
    proxy.$nextTick(() => {
        router.push({ path: "/daily/addUpdDaily" })
    })
    
}
const updDaily = (date) => {
    store.date = date;
    store.isUp = true;
    proxy.$nextTick(() => {
        router.push({ path: "/daily/addUpdDaily" }) 
    })
}
const handleClose = (done) => {
    //done();
    getMonthData();
    dialogVisible.value = false;
}
const getDaily = (date) =>{
    //store.date = date;
   // getAlldata(date);
   // provide("myDailyList", myDailyList.value)
    dialogVisible.value = true;
   
}
getMonthData();
</script>

<style lang="scss" scoped>
ul {
	padding: 20px 20px 0px 20px;
	display: flex;
	justify-content: space-evenly;
	text-align: center;
	margin: 0;
    min-width: 1116px;
	li {
		list-style: none;
		width: 13.5%;
		background: #ffdbdd;
		color: #be1a21;
		padding: 8px 0;
		font-weight: 600;
		border-radius: 3px;
	}
}
.date_change {
	padding-top: 30px;
	position: relative;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	span {
		margin: 0 20px;
		font-size: 22px;
	}
	.el-icon {
		cursor: pointer;
	}
}
.today {
	position: absolute;
	right: 20px;
	padding: 6px 10px;
	background: #eeeeee;
	border-radius: 4px;
	color: #999999;
	cursor: pointer;
	font-size: 16px !important;
}
.today:hover {
	background: #d0d0d0;
	color: #ffffff;
}
.dateBu {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: #1e1e1e;
}
.isPunched {
	position: absolute;
	right: 0.9375rem;
	top: 0.9375rem;
	display: inline-block;
	border-radius: 5px;
	width: 4rem;
	height: 1.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
	//background: url(../../assets/images/mainImg/ok.png) no-repeat;
	//background-size: contain;
}
.unread{
    background-color: #FFDADE;
    color: #BE1A21;
    font-weight: bold;
}
.read{
    background-color: #EEEEEE;
    color: #999999;
}
.annotated{
    background-color: #1AC45F;
    color: #ffffff;
}

.noPunched {
	position: absolute;
	right: 20px;
    bottom: 20px;
	display: inline-block;
	border-radius: 50%;
	background: #f51f28;
}
:deep(.el-calendar){
    .el-calendar-day {
		height: 123px;
        min-width: 148px;
        max-width: 246px;
	}
	.el-calendar__body {
		padding-bottom: 0;
		padding: 12px 30px 25px;
	}
	.current {
		position: relative;
	}
	.el-calendar-table__row {
	  .next,
	  .prev {
	   font-size: 22px;
	   pointer-events: none;
	  }
	 }
}
:deep(.el-popover.el-popper){
    height: 300px;
}
.el-popper{
    transform:translateY(350px)
}
.tk {
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.zBox {
	height: 99.8%;
	background-color: #ffffff;
	border-radius: 10px;
    overflow: auto;
}
.updDailyButton{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.comment{
    width: 100%;
    padding: 10px;
    border: 1px dashed #BE1A21;
    border-radius: 8px;
    box-shadow: 0px 0px 5px 0px rgba(15,69,150,0.1);
}
.dailyList{
    margin-top: 10px;
    height: 163px;
    overflow: hidden;
    .itemLabel{
        color: #BE1A21;
        font-weight: 500;
        font-size: 16px;
    }
    :deep(img){
        width: 190px;
    }
    
}
.updDailyButton{
    .el-button--danger{
       background: #FFDADE;
       color: #BE1A21; 
       border-color:#FFDADE;
    }
    .updateRB{
        background: #BE1A21;
       color: #ffffff; 
       border-color:#BE1A21;
    }
}
</style>